<template>
	<view class="goods_detail">
		{{ total }}
		<!-- 轮播图区域 -->
		<swiper circular indicator-dots autoplay :interval="3000" :duration="1000">
			<swiper-item v-for="(item, i) in goods.pics" :key="itm.pics_id">
				<image @click="previewImg(i)" :src="item.pics_mid_url"></image>
			</swiper-item>
		</swiper>

		<!-- 商品信息区域 -->
		<view class="goods-info-box" v-if="goods.goods_name">
			<!-- 商品价格 -->
			<view class="price">￥{{ goods.goods_price }}</view>
			<!-- 信息主体区域 -->
			<view class="goods-info-body">
				<!-- 商品名称 -->
				<view class="goods-name">{{ goods.goods_name }}</view>
				<!-- 收藏 -->
				<view class="favi">
					<van-icon name="star-o" size="20px" />
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费 -->
			<view class="yf">快递：免运费</view>
		</view>

		<!-- 商品详细信息 html str -->
		<rich-text :nodes="goods.goods_introduce"></rich-text>

		<!-- 底部导航区域 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
			<van-goods-action-icon :info="totalCount" icon="cart-o" text="购物车" bind:click="onClickIcon" />
			<van-goods-action-button text="加入购物车" type="warning" @click="addToCart" />
			<van-goods-action-button text="立即购买" @click="goCart" />
		</van-goods-action>
	</view>
</template>

<script>
	import {
		loadGoodsDetail
	} from '@/api/goods.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'

	// mapState 获取vuex内部的state数据
	// mapState: 函数
	// mapState(['test']): 数组 数组每一项就是state的数据
	// mapState: 返回值：Object，计算属性
	// ...mapState(['test'])
	export default {
		data() {
			return {
				goods: {}
			};
		},
		computed: {
			total: function() {
				const price = 199
				const num = 23
				return price * num
			},
			// { test: function() {}, aa: function() {} }
			// ...mapState(['test', 'aa']),
			...mapGetters('cart', ['totalCount'])
		},
		methods: {
			...mapMutations('cart', ['add']),
			// 请求、数据保存、数据处理
			async getGoodsDetail(id) {
				const res = await loadGoodsDetail(id)
				console.log(res.data.message.goods_introduce)
				// <img data-src="//image.suning.cn/uimg/sop/commodity/165421433355631824985720_x.jpg?from=mobile&amp;format=80q.webp" alt="" usemap="#rm" border="0" src="//image.suning.cn/uimg/sop/commodity/165421433355631824985720_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
				// <img style="display:block"
				res.data.message.goods_introduce = res.data.message.goods_introduce.replace(/<img/g,
					'<img style="display:block"').replace(/webp/g, 'jpg')
				this.goods = res.data.message
			},
			// 预览轮播图
			previewImg(i) {
				const urls = []
				// 处理urls图片列表
				for (let i = 0; i < this.goods.pics.length; i++) {
					const pic = this.goods.pics[i]

					urls.push(pic.pics_big_url)
				}
				// 实现图片预览
				uni.previewImage({
					current: i,
					urls: urls
				})
			},
			goCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			addToCart() {

				const good = {
					goods_id: this.goods.goods_id,
					goods_name: this.goods.goods_name,
					goods_price: this.goods.goods_price,
					goods_count: 1,
					goods_small_logo: this.goods.goods_small_logo,
					goods_state: true
				}
				this.add(good)

			}
		},
		onLoad(options) {
			this.getGoodsDetail(options.id)
		}
	}
</script>

<style lang="scss">
	.goods_detail {
		swiper {
			width: 750rpx;
			height: 750rpx;

			swiper-item {
				image {
					width: 750rpx;
					height: 750rpx;
				}
			}
		}

		// 商品信息区域的样式
		.goods-info-box {
			padding: 10px;
			padding-right: 0;

			.price {
				color: #c00000;
				font-size: 18px;
				margin: 10px 0;
			}

			.goods-info-body {
				display: flex;
				justify-content: space-between;

				.goods-name {
					font-size: 13px;
					padding-right: 10px;
				}

				// 收藏区域
				.favi {
					width: 120px;
					font-size: 12px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-left: 1px solid #efefef;
					color: gray;
				}
			}

			// 运费
			.yf {
				margin: 10px 0;
				font-size: 12px;
				color: gray;
			}
		}
	}
</style>
